<template>
  <el-dialog
    :title="title"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="cancelDialog"
    width="730px"
  >
    <el-form ref="courseForm" v-loading="loading" class="gl_form_mini" :model="courseForm" style="padding: 0 30px" :rules="courseForm_rules" label-width="100px">
      <el-form-item label="课程名称" prop="name">
        <el-input v-model="courseForm.name" placeholder="请输入课程名称" maxlength="16" show-word-limit size="mini" type="text" />
      </el-form-item>
      <el-form-item label="授课模式" prop="teachingModeCode">
        <el-radio-group v-model="courseForm.teachingModeCode">
          <el-radio v-for="item in dict.teachingMode" :key="item.code" :label="item.code">{{ item.value }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="课表颜色" prop="courseScheduleColor">
        <el-input v-model="courseForm.courseScheduleColor" style="display:none;" />
        <div class="radiobox">
          <div v-for="(item,index) in radioList" :key="item" :class="['radio', colorIndex === index ? 'radioOuter' : '']" @click="clickColor(index)">
            <div :style="{background:item}" class="radioOne" />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="课时标准" prop="lessonStandardCode" class="classType">
        <el-radio-group v-model="courseForm.lessonStandardCode">
          <el-radio v-for="item in dict.lessonStandard" :key="item.code" :label="item.code">{{ item.value }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="courseForm.lessonStandardCode === 'Period'" label="时段类型" prop="lessonPeriodCode">
        <el-select v-model="courseForm.lessonPeriodCode" placeholder="请选择时段类型" style="width: 50%">
          <el-option v-for="item in dict.lessonPeriod" :key="item.code" :label="item.value" :value="item.code" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="courseForm.lessonStandardCode" label="应扣课时" prop="amount">
        <el-input v-model="courseForm.amount" placeholder="请输入课时数量" type="number" :min="1" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancelDialog">取消</el-button>
      <el-button type="primary" size="mini" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import validator from '@/lib/validate/index.js';
import { CreateCourseInput } from '@/lib/form/hall/swaggerForm';
import { api_POST_ClubCourse, api_PUT_ClubCourseId } from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      colorIndex: 0,
      title: '新建课程',
      id: '',
      loading: false,
      dialogVisible: false,
      courseForm: new CreateCourseInput(),
      radioList: ['#8ED6FF', '#E57DFF', '#FFCB7D', '#FF857D', '#ADE78D', '#7D9AFF', '#FFAC7D', '#807DFF', '#A4C8FF', '#FF80AD'],
      courseForm_rules: {
        name: [{ required: true, message: '课程名称不能为空', trigger: 'blur' }],
        teachingModeCode: [{ required: true, message: '授课模式为必选项', trigger: 'blur' }],
        courseScheduleColor: [{ required: true, message: '课程颜色为必选项', trigger: 'blur' }],
        lessonStandardCode: [{ required: true, message: '课时标准为必选项', trigger: 'blur' }],
        lessonPeriodCode: [{ required: true, message: '时段类型为必选项', trigger: 'blur' }],
        amount: [
          { required: true, message: '课时数量不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkNumber(value, '请输入正确课时数值'));
            },
            trigger: 'blur'
          }]
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  created() {
    this.getDict();
  },
  methods: {
    // 若没有字典信息，外部可直接调用方法获取字典数据
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    submit() {
      // 课程颜色
      if (!this.courseForm.courseScheduleColor) {
        this.courseForm.courseScheduleColor = this.radioList[0];
      }
      // 按时段收费
      if (this.courseForm.lessonStandardCode === 'Period' && this.courseForm_rules.lessonPeriodCode.indexOf({ required: true, message: '时段类型为必选项', trigger: 'blur' }) === -1) {
        this.courseForm_rules.lessonPeriodCode.push({ required: true, message: '时段类型为必选项', trigger: 'blur' });
      }
      // 按课时收费
      if (this.courseForm.lessonStandardCode === 'Hour') {
        this.courseForm.lessonPeriodCode = null;
        if (this.courseForm_rules.lessonPeriodCode.indexOf({ required: true, message: '时段类型为必选项', trigger: 'blur' }) !== -1) {
          this.courseForm_rules.lessonPeriodCode.pop({ required: true, message: '时段类型为必选项', trigger: 'blur' });
        }
      }
      if (this.courseForm.amount <= 0) {
        this.$message({ type: 'warning', message: '应扣课时最少为1课时' });
        return;
      }
      this.$refs.courseForm.validate(valid => {
        if (valid) {
          const that = this;
          this.loading = true;
          if (this.id) {
            api_PUT_ClubCourseId(this.id, this.courseForm).then(res => {
              this.dialogVisible = false;
              this.loading = false;
              this.$message({ type: 'success', message: '修改成功' });
              // this.$router.push({ name: 'CourseManagement' });
              this.$parent.getPageList(that.$parent.selectedMsg.Page);
              this.courseForm = new CreateCourseInput();
            }, error => {
              this.loading = false;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            });
          } else {
            api_POST_ClubCourse(this.courseForm).then(res => {
              this.dialogVisible = false;
              this.loading = false;
              this.$message({ type: 'success', message: '添加成功' });
              // this.$router.push({ name: 'CourseManagement' });
              this.$parent.getPageList();
              this.courseForm = new CreateCourseInput();
            }, error => {
              this.loading = false;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            });
          }
        } else {
          return false;
        }
      });
    },
    cancelDialog() {
      this.id = '';
      this.dialogVisible = false;
      this.colorIndex = 0;
      this.courseForm = new CreateCourseInput();
    },
    clickColor(index) {
      this.colorIndex = index;
      this.courseForm.courseScheduleColor = this.radioList[index];
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  height: 36px;
  line-height: 23px;
  font-size: 16px;
  font-weight: 600;
  font-family: PingFang SC, PingFang SC-Medium;
  padding-left: 9px;
  border-bottom: 2px solid #ddd;
  color: rgba(0, 0, 0, .85)
}
.radiobox {
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .radio {
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 2px;
    margin-right: 5px;
  }
  .radioOuter {
    border: 1px solid #304156;
  }
  .radioOne {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-top: 5px;
    border-radius: 2px;
  }
  .oneBorder {
    border: 2px solid #1990FF;
  }
}
.classType {
  .el-form-item__content {
    height: 80px;
  }
}
.submitIt {
  margin: 30px 0px 0px 300px;
}
</style>
